<template>
  <!-- 电脑 -->
  <n-modal v-if="!$cfg.mobile" v-model:show="val[mdname]">
    <n-card
      class="work_card"
      preset="card"
      closable
      aria-modal="true"
      @close="val[mdname] = false"
    >
      <template #header>{{ text.title }}</template>
      <component :is="comp.roledata" />
    </n-card>
  </n-modal>
  <!-- 手机 -->
  <n-drawer v-else v-model:show="val[mdname]" class="work_drawer" placement="top">
    <n-drawer-content closable>
      <template #header>{{ text.title }}</template>
      <component :is="comp.roledata" />
      <template #footer>
        <n-button @click="val[mdname] = false">关闭窗口</n-button>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script>
export default {
  setup() {
    const comp = {
      roledata: defineAsyncComponent(() => import("./updrole/upd_role_data.vue")),
    };
    const text = {
      title: "编辑角色数据库",
    };
    return {
      text,
      comp,
    };
  },
  props: {
    val: {
      required: true,
    },
    mdname: {
      required: true,
    },
  },
};
</script>
